<template>
	<view>
		<view  style="height: 550rpx">
			<l-echart ref="chart"></l-echart>
		</view>
	</view>
</template>

<script>
	import * as api from 'common/api.js';
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	var chart_options = {
		//backgroundColor: '#0a1434',
		legend: {
			show: true,
			x: 'center',
			y: '10',
			icon: 'stack',
			itemWidth: 10,
			itemHeight: 10,
			textStyle: {
				fontSize: 12,
				color: 'rgb(0,253,255,0.6)'
			},
			data: ['下料量', "下水量"]
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(0, 255, 233,0)'
						}, {
							offset: 0.5,
							color: 'rgba(255, 255, 255,1)',
						}, {
							offset: 1,
							color: 'rgba(0, 255, 233,0)'
						}],
						global: false
					}
				},
			}
		},
		grid: {
			top: '15%',
			left: '15%',
			right: '15%',
			bottom: '15%',
			//containLabel: false
		},
		xAxis: [{
			type: 'category',
			axisTick: {
				show: true,
				inside: true //刻度内置
			},
			axisLine: {
				show: true
			},
			splitArea: {
				// show: true,
				color: '#f00',
				lineStyle: {
					color: '#f00'
				},
			},
			axisLabel: {
				color: '#333',
				showMaxLabel: true, //显示最大刻度
				interval: 0
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(0,0,0,0.2)'
				}
			},
			boundaryGap: false,
			//data: ['A', 'B', 'C', 'D', 'E', 'F'],

		}],
		yAxis: [{
			type: 'value',
			min: 0,
			splitLine: {
				show: false,
				lineStyle: {
					color: 'rgba(0,0,0,0.2)'
				}
			},
			axisLine: {
				show: false,
			},
			axisLabel: {
				show: true,
				margin: 20,
				textStyle: {
					color: '#333',

				},
			},
			axisTick: {
				show: true,
			},
		}, {
			type: 'value',
			min: 0,
			splitLine: {
				show: false,
				lineStyle: {
					color: 'rgba(0,0,0,0.2)'
				}
			},
			axisLine: {
				show: false,
			},
			axisLabel: {
				show: true,
				margin: 20,
				textStyle: {
					color: '#333',

				},
			},
			axisTick: {
				show: true,
			},
		}],
		series: [{
			name: '下料量',
			type: 'line',
			//symbolSize: 3,
			smooth: false, //是否平滑
			showSymbol: true,
			// symbol: 'image://./static/images/guang-circle.png',
			//symbol: 'none',
			yAxisIndex: 0,

			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#00c7d9'
					}, {
						offset: 0.8,
						color: 'rgba(255,255,255,0)'
					}], false),
					// shadowColor: 'rgba(255,255,255, 0.1)',
					//shadowBlur: 10,
					//opacity: 0.3,
				}
			},
			itemStyle: {
				normal: {
					color: '#00c7d9',
					lineStyle: {
						width: 1,
						type: 'solid' //'dotted'虚线 'solid'实线
					},
					borderColor: '#00c7d9', //图形的描边颜色。支持的格式同 color
					//borderWidth: 8 ,//描边线宽。为 0 时无描边。[ default: 0 ] 
					barBorderRadius: 0,
					label: {
						show: false,
					},
					//opacity: 0.5,
				}
			},
			tooltip: {
				show: true
			}
		}, {
			name: '下水量',
			type: 'line',
			showSymbol: true,
			yAxisIndex: 1,
			itemStyle: {
				normal: {
					color: '#1E9FFF',
					lineStyle: {
						width: 1,
						type: 'solid' //'dotted'虚线 'solid'实线
					},
					borderColor: '#1E9FFF', //图形的描边颜色。支持的格式同 color
					//borderWidth: 8 ,//描边线宽。为 0 时无描边。[ default: 0 ] 
					barBorderRadius: 0,
					label: {
						show: false,
					},
					//opacity: 0.5,
				}
			},
			tooltip: {
				show: true
			}
		}]
	}

	var nanmu_orange = "#F29114";
	var nanmu_blue = "#00A1BA";
	var nanmu_green = "#33ff3d";
	
	export default {
		data() {
			return {
				para: {},
				room_name: '',
				bind_m_s: 0,
				bind_saddr: '',
				curve_data: [],
				feed_water: 0,
				curve_type: 0,
			}
		},
		onLoad: function(option) {
			this.room_name = option.room_name
			this.bind_saddr = option.bind_saddr
			this.bind_m_s = option.bind_m_s
			this.para = JSON.parse(option.para)
			console.info(this.room_name)
			console.info(JSON.parse(option.para))
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.room_name + ' 曲线'
			});

		},
		mounted() {
			setTimeout(this.loadChart(),500);
			//this.loadChart()
		},
		methods: {

			loadChart() {
				var that = this

				that.curve_data = []
				if (that.para.Stage[that.bind_m_s] > 0) {
					console.info("哺乳")
					for (var i = 5; i < 10; i++) {
						if (that.para.OutDay[that.bind_m_s][i] > 0) {
							var obj = {
								"OutDay": parseInt(that.para.OutDay[that.bind_m_s][i]),
								"OutMax": parseFloat(that.para.OutMax[that.bind_m_s][i]),
								"OutSW": parseInt(that.para.OutSW[that.bind_m_s][i]),
								"RealVal": 1,
							};
							that.curve_data.push(obj);
						}
					}
				} else {
					console.info("产前")
					for (var i = 0; i < 5; i++) {
						if (that.para.OutDay[that.bind_m_s][i] > 0) {
							var obj = {
								"OutDay": parseInt(that.para.OutDay[that.bind_m_s][i]),
								"OutMax": parseFloat(that.para.OutMax[that.bind_m_s][i]),
								"OutSW": parseInt(that.para.OutSW[that.bind_m_s][i]),
								"RealVal": 1,
							};
							that.curve_data.push(obj);
						}
					}
				}

				that.feed_water = parseInt(that.para.FeedWater)
				that.curve_type = 0
				if (that.para.Mode > 0) {
					//育肥
					that.curve_type = 2

				} else {
					//母猪
					if (that.para.Stage[that.bind_m_s] > 0) {
						//哺乳
						that.curve_type = 0
					} else {
						//非哺乳
						that.curve_type = 1
					}
				}

				that.$refs.chart.init(echarts, chart => {

					var day_arr = [];
					var val_arr = [];
					var val1_arr = [];
					for (var i = 0; i < that.curve_data.length; i++) {
						var symbol = "none";
						var symbolSize = 1;
						if (that.curve_data[i].RealVal > 0) {

							if (that.curve_data[i].OutSW > 0) {
								symbol = "triangle";
							} else {
								symbol = "circle";
							}
							symbolSize = 20;
						} else {
							symbol = "roundRect";
							symbolSize = 1;
						}
						var data_obj = {
							value: that.curve_data[i].OutMax,
							symbol: symbol,
							symbolSize: symbolSize
						};
						val_arr.push(data_obj);

						var water_value = 0;
						if (that.feed_water > 0) {
							water_value =  parseFloat((parseFloat(that.curve_data[i].OutMax) / parseFloat(that.feed_water)).toFixed(1));
						}
						var data1_obj = {
							value: water_value,
							symbol: "roundRect",
							symbolSize: 2
						};
						val1_arr.push(data1_obj);
						day_arr.push(that.curve_data[i].OutDay);

					}

					if (that.curve_type == 0) {
						//哺乳
						chart_options.series[0].areaStyle.normal.color = new echarts.graphic.LinearGradient(0, 0,
							0, 1, [{
								offset: 0,
								color: nanmu_orange
							}, {
								offset: 0.8,
								color: 'rgba(255,255,255,0)'
							}], false);
						chart_options.series[0].itemStyle.normal.color = nanmu_orange;
						chart_options.series[0].itemStyle.normal.borderColor = nanmu_orange;
					} else if (that.curve_type == 1) {
						//待产
						chart_options.series[0].areaStyle.normal.color = new echarts.graphic.LinearGradient(0, 0,
							0, 1, [{
								offset: 0,
								color: nanmu_blue
							}, {
								offset: 0.8,
								color: 'rgba(255,255,255,0)'
							}], false);
						chart_options.series[0].itemStyle.normal.color = nanmu_blue;
						chart_options.series[0].itemStyle.normal.borderColor = nanmu_blue;
					} else if (that.curve_type == 2) {
						//育肥
						chart_options.series[0].areaStyle.normal.color = new echarts.graphic.LinearGradient(0, 0,
							0, 1, [{
								offset: 0,
								color: nanmu_green
							}, {
								offset: 0.8,
								color: 'rgba(255,255,255,0)'
							}], false);
						chart_options.series[0].itemStyle.normal.color = nanmu_green;
						chart_options.series[0].itemStyle.normal.borderColor = nanmu_green;
					}

					chart_options.series[0].data = val_arr;
					chart_options.series[1].data = val1_arr;
					chart_options.xAxis[0].data = day_arr;
					chart.setOption(chart_options);



				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	uni-page-body {
		background-color: #ffffff !important;
		min-height: 100% !important;
		height: auto !important;
	}
</style>